<html>
	<head>
		<link rel="stylesheet" href="/games/dijit/themes/claro/claro.css">
		<script>dojoConfig = {parseOnLoad: true}</script>
		<script src='/games/dojo/dojo.js'></script>
	</head>
	<body class="claro">
		<!-- load Dojo -->
		<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js" data-dojo-config="async: true"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" data-dojo-config="async: true"></script>
		<script>
		// Instead of using data-dojo-config, we're creating a dojoConfig
		// object *before* we load dojo.js; they're functionally identical,
		// it's just easier to read this approach with a larger configuration.
		var dojoConfig = {
			async: true,
			// This code registers the correct location of the "games"
			// package so we can load Dojo from the CDN whilst still
			// being able to load local modules
			packages: [{
				name: "games",
				location: location.pathname.replace(/\/[^/]*$/, '') + '/games'
			}]
		};
		function signup() {
			$("#signup_error").html("");
			if($("#signup_email_id").val().trim() == "") {
				$("#signup_error").html("Please enter email");
				return;
			}
			if($("#signup_password").val().trim() == "") {
				$("#signup_error").html("Please enter password");
				return;
			}
			if($("#signup_repeat_password").val().trim() == "") {
				$("#signup_error").html("Please enter repeat password");
				return;
			}
			if($("#signup_password").val() != $("#signup_repeat_password").val()) {
				$("#signup_error").html("Passwords don't match");
				return;
			}
			$.ajax({
				type: "POST",
				url: "/games/signup.do",
				data: "userName=" + $("#signup_email_id").val() + "&password=" + $("#signup_password").val(),
				success: function(response) {
					signupDialog.destroyRecursive();
					require(["dijit/Dialog", "dojo/domReady!"], function(Dialog) {
						// create the dialog
						infoDialog = new Dialog({
							title: "Signup successful",
							content: response
						});
						infoDialog.connect(infoDialog, "hide", function(e) {
							infoDialog.destroyRecursive();
						});
					});
					infoDialog.show();
				},
				error: function(e) {
					$("#signup_error").html(e.responseText);
				}
			});
		}
		function login() {
			debugger;
			$("#login_error").html("");
			if($("#login_email_id").val().trim() == "") {
				$("#login_error").html("Please enter email");
				return;
			}
			if($("#login_password").val().trim() == "") {
				$("#login_error").html("Please enter password");
				return;
			}
			$.ajax({
				type: "POST",
				url: "/games/login.do",
				data: "email=" + $("#login_email_id").val() + "&password=" + $("#login_password").val(),
				success: function(response) {
					loginDialog.destroyRecursive();
					$("#top").html(response);
				},
				error: function(e) {
					$("#login_error").html(e.responseText);
				}
			});
		}
		function closeInfoDialog() {
			infoDialog.hide();
		}
		function openSignup() {
			$.ajax({
				type: "GET",
				url: "/games/signup.jsp",
				success: function(response) {
					require(["dijit/Dialog", "dojo/domReady!"], function(Dialog) {
						signupDialog = new Dialog({
							title: "Signup",
							content: response,
						});
						signupDialog.connect(signupDialog, "hide", function(e) {
							signupDialog.destroyRecursive();
						});
					});
					signupDialog.show();
				}
			});
		}
		function openLogin() {
			$.ajax({
				type: "GET",
				url: "/games/login.jsp",
				success: function(response) {
					require(["dijit/Dialog", "dojo/domReady!"], function(Dialog) {
						// create the dialog
						loginDialog = new Dialog({
							title: "Login",
							content: response,
						});
						loginDialog.connect(loginDialog, "hide", function(e) {
							loginDialog.destroyRecursive();
						});
					});
					loginDialog.show();
				}
			});
		}
		function logout() {
			$.ajax({
				type: "GET",
				url: "/games/logout.do",
				success: function(response) {
					$("#top").html(response);
				}
			});
		}
		</script>
		<table style="width: 100%">
			<tr><td align="right"><jsp:include page="top.jsp"/></td></tr>
			<tr><td><jsp:include page="main.jsp"/></td></tr>
		</table>
	</body>
</html>
